<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>书籍详情</title>
        <link type="text/css" rel="stylesheet"
               href="../../bootstrap-4.4.1-dist/css/bootstrap.css">
    <script src="../../js/jquery.js"></script>
    <script src="../../bootstrap-4.4.1-dist/js/bootstrap.js"></script>
</head>
<style>
    body {
        user-select: none; /* 禁止文本被选中 */
        -webkit-user-select: none; /* Chrome浏览器的兼容性处理 */
        -moz-user-select: none; /* Firefox浏览器的兼容性处理 */
        -ms-user-select: none; /* IE/Edge浏览器的兼容性处理 */
    }

</style>
<body>
<nav class="navbar navbar-expand-lg navbar-light" style="background-color: white">
    <div class="container">
        <a class="navbar-brand" href="#">
            <img src="../../image/logo.png" alt="Logo" style="border-radius: 50%;" width="30" height="30"
                 class="d-inline-block align-top">
            SUN 图书馆
        </a>
    </div>
</nav>
<p style="background-color: lightsalmon;height: 5px"></p>
<!--图书详情展示-->
<div style="width: 1000px;margin:20px auto;">
    <div class="row">
        <div class="col-md-3">
            <img src="../../image/图书.png" alt="图书封面" class="img-fluid">
        </div>
        <div class="col-md-3">
            <p style="height: 30px;font-size: 20px"><strong>《<span id="name"></span>》</strong></p>
            <p><strong>编号：</strong> <span id="code"></span></p>
            <p><strong>作者：</strong> <span id="authors"></span></p>
            <p><strong>出版社：</strong> <span id="press"></span></p>
            <p><strong>出版日期：</strong> <span id="publishDate"></span></p>
            <p><strong>价格：</strong> <strong><span id="price" style="color: red"></span>￥</strong></p>
        </div>
        <div class="col-md-4">
            <p style="height: 30px"></p>

            <p><strong>状态：</strong> <span id="satus" style="border-radius: 10px;padding: 2px;color: white"></span></p>
            <p><strong>类型：</strong> <span id="categoryId"></span></p>
            <p><strong>介绍：</strong> <span id="description"></span></p>
            <p style="height: 30px"></p>
        </div>
    </div>
    <div style="padding-left: 800px">
        <button type="button" id="addTS" onclick="addTS()" class="btn btn-primary">加入暂存架</button>
        <button type="button" id="borrow" onclick="borrow()" class="btn btn-success">借阅</button>
    </div>
</div>
</div>
</body>
</html>
<script>

    //借阅
    function borrow() {
        if ($('#borrow').html() != '不可借阅') {
            let code = $('#code').html()
            let opr = "borrowBookTsOne"
            $.ajax({
                'url': '../../BorrowServlet.action',
                'type': 'post',
                'data': {opr, code},
                'dataType': 'json',
                'success': borrowSuccess
            })
        }
    }
    function borrowSuccess(data) {
        if (data == 'ok'){
            alert("借阅成功！")
            window.location.href = '../../html/home/home.html'
        }else if (data == 'noBookNum'){
            alert("借阅失败,你的借阅数量已经上限了!!!")
        }
    }

    // 加入暂存架
   function addTS() {
        if ($('#addTS').html() != '不可暂存'){
            let code = $('#code').html()
            let opr = "addTS"
            $.ajax({
                'url': '../../BookServlet.action',
                'type': 'post',
                'data': {opr,code},
                'dataType': 'json',
                'success': addTSSuccess
            })
        }
    }
    function addTSSuccess(data) {
        if (data == 'ok'){
            alert('添加成功!')
            window.location.href = '../../html/home/home.html'
        } else if (data == 'have'){
            alert("已存放暂存架!")
        }else {
            alert('添加失败!')
        }
    }


    window.onload = function () {
        let queryString = window.location.search;
        let urlParams = new URLSearchParams(queryString);
        let bookId = urlParams.get('bookId');
        bookDetail(bookId)
    }

    function bookDetail(bookId) {
        let opr = "bookDetail"
        $.ajax({
            'url': '../../BookServlet.action',
            'type': 'post',
            'data': {opr,bookId},
            'dataType': 'json',
            'success': bookDetailSuccess
        })
    }
    function bookDetailSuccess(data) {
        $('#authors').html(data.authors)
        let categoryId = data.categoryId
        categoryName(categoryId)
        $('#code').html(data.code)
        $('#description').html(data.description)
        $('#name').html(data.name)
        $('#press').html(data.press)
        $('#price').html((data.price).toFixed(2))
        let publishDate = data.publishDate
        publishDate = publishDate.replace(/(\d{4}-\d{2}-\d{2}) \d{2}:\d{2}:\d{2}/, '$1')
        $('#publishDate').html(publishDate)
        let satus = data.satus
        if (satus == '0'){
            satus = '未在库'
            $('#satus').css("background-color", "red");
            $('#addTS').html('不可暂存')
            $('#addTS').css("background-color", "#5a6268")
            $('#borrow').html('不可借阅')
            $('#borrow').css("background-color", "#5a6268")
        }else if (satus == '1'){
            satus = '在库'
            $('#satus').css("background-color", "#8fd19e");
        }else if (satus == '2'){
            satus = '外借'
            $('#satus').css("background-color", "orange");
            $('#addTS').html('不可暂存')
            $('#addTS').css("background-color", "#5a6268")
            $('#borrow').html('不可借阅')
            $('#borrow').css("background-color", "#5a6268")
        }
        $('#satus').html(satus)
    }

    function categoryName(categoryId) {
        let opr = "categoryName"
        $.ajax({
            'url': '../../CategoryServlet.action',
            'type': 'post',
            'data': {opr,categoryId},
            'dataType': 'json',
            'success': categoryNameSuccess
        })
    }
    function categoryNameSuccess(data) {
        $('#categoryId').html(data)
    }
</script>